<template>
	<view class="content">
		<u-sticky offset-top="0" h5-nav-height="0">
			<view class="mhead" :style="{paddingTop: titleTop + 'px'}">
				<view class="mhone">
					<text class="htit">{{ is_shenhe == 1?'产品':'门店' }}</text>
					<view class="tsou">
						<image class="icon_ss" src="/static/img/icon_ssicon.png" />
						<u-input class="iteminput" input-align="left" v-model="keywords" type="text" placeholder='搜索' />
						<view class="souname" @click="getClear">搜索</view>
					</view>
				</view>
				<view class="tuanone">
					<view class="diqie" @click="toCommunity">
						<image class="icon_dz" src="/static/img/icon_dz.png" />
						<text class="qdi txt">{{formData.address+formData.name||'请选择'}}</text>
						<image class="icon_qh" src="/static/img/icon_qh.png" />
					</view>
					<view class="qietuan">
						<view class="titem" :class="order=='tui'?'qctive':''" @click="gethead('tui')">推荐</view>
						<view class="titem" :class="order=='distance'?'qctive':''" @click="gethead('distance')">距离</view>
						<view class="titem" :class="order=='weigh'?'qctive':''" @click="gethead('weigh')">综合排序</view>
					</view>
				</view>
			</view>
			
		</u-sticky>
		<view class="mlist" v-if="is_shenhe == 0">
			<view class="mitem" v-for="(item,index) in list" :key="index" @click="getzhuye(item)">
				<image class="itemtu" :src="item.image" />
				<view class="mright">
					<view class="row tp">
						<text class="bt txt">{{item.name}}</text>
						<image class="icon_rz" src="/static/img/icon_rz.png" />
					</view>
					<u-rate class="tptwo" size="28" :count="count" v-model="item.star" disabled></u-rate>
					<view class="row">
						<text class="diname">{{item.cate_name +'' +item.address}}</text>
						<view class="row ml">
							<image class="icon_dw" src="/static/img/icon_dw.png" />
							<text class="mi">{{item.distance}}</text>
						</view>
					</view>
					<view class="tuanview" v-if="item.goods!=''&&is_shenhe==0">
						<text class="tname">团</text>
						<text class="qian">¥<text class="qnum">{{item.goods[0].price}}</text></text>
						<text class="yjia">￥{{ item.goods[0].oprice }}</text>
						<text class="shopname txt">{{item.goods[0].title}}</text>
					</view>
					
				</view>
			</view>
			<u-loadmore :status="status" @loadmore="loadmore" />
		</view>

		<view class="rexiao" v-if="is_shenhe == 1">
			<view class="rehade">
				<text class="retit">最新产品</text>
				<!-- <view class="geng">
					<text class="gname">更多</text>
					<image class="icon_next" src="/static/img/icon_next.png" />
				</view> -->
			</view>
			<view class="xinlist" v-for="(item,index) in relist" :key="index" @click.stop="getDetail(item)">
				<image class="tuimg" :src="item.image" lazy-load mode="aspectFill" />
				<view class="xinright">
					<text class="xinname txt">{{ item.title }}</text>
					<view class="xbqian">
						<view class="bitem" v-for="(i,ind) in item.taps" :key="ind">{{ i }}</view>
					</view>
					<view class="jia">
						<text class="xjia"><text class="xiao">￥</text>{{ item.price }}</text>
						<text class="yjia">￥{{ item.oprice }}</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" @loadmore="loadmore" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				titleTop: 0,
				count: 5,
				value: 4,
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				latitude:'',
				longitude:'',
				keywords:'',
				formData:{
					address:'',
					name:'',
				},
				order:'tui',//推荐传 tui   距离 distance 综合 weigh
				is_shenhe:'',////1就是开启审核
				relist:[]
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let that = this;
			// 获取胶囊按钮位置信息
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const { top, height } = menuButtonInfo;
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			// 计算标题需要偏移的位置
			let titleTop = top + (height - statusBarHeight) / 2;
			const systemInfo = uni.getSystemInfoSync();
			console.log(systemInfo.platform)
			if (systemInfo.platform == 'ios') {
				console.log('当前设备是ios设备');
				titleTop = Number(titleTop)+8
			} 
			this.titleTop = titleTop;//设置标题顶部距离
			this.statusBarHeight = statusBarHeight;//设置状态栏高度
			// #endif
			// #ifdef H5
			this.titleTop = 20;//设置标题顶部距离
			// #endif
		},
		onLoad(option) {
			if(!this.latitude){
				this.getdinwei()
			}
			if(option.invite_code){
				this.invite_code = option.invite_code
				uni.setStorageSync('invite_code',this.invite_code);
				this.$store.commit('changeinvite_code',this.invite_code);
			}
			
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '东方蓉妍',
				// imageUrl:this.list[this.currentIndex].image,
				path: '/pages/tabbar/Men?invite_code='+this.$store.state.code||uni.getStorageSync('code')
			}
		},
		onShareTimeline(){
			return {
				title: '东方蓉妍',
				// imageUrl:this.list[this.currentIndex].image,
				path: '/pages/tabbar/Men?invite_code='+this.$store.state.code||uni.getStorageSync('code')
			}
		},
		onShow() {
			if(this.latitude&&uni.getStorageSync('token')){
				this.getClear();//拿到数据

			}
			this.getshenhe()
		},
		
		onReachBottom: function () {
			this.loadmore();
		},

		methods: {
			getDetail(item){
				this.navrouter('/pages_client/twoPage/ShopDetail?type=1'+'&id='+item.id)
			},
			async getshenhe(){
				let res = await this.$u.api.getShenhe({
				});
				if(res){

					if(!this.compareVersion(this.$store.state.Version,res.version)){
						//当前版本小于 接口返回版本
						this.is_shenhe = res.is_shenhe//1就是开启审核
						// #ifdef H5
						this.is_shenhe = 0
						//  #endif
					}else{
						//当前版本等于或者大于 接口返回版本 显示
						this.is_shenhe = 0
					}
					if(this.is_shenhe == 1){
						this.getzuixinList()
					}
				}
			},
			async getzuixinList(){//列表数据
				let res = await this.$u.api.getNewGoods({
					cate_id:'',
				  	page:1
				});
				let list = res.list;
				this.relist = list
				// if(res.list==''||Number(list.length)<Number(this.limit)){
				// 	this.status = 'nomore';
				// }
			},
			getdinwei(){
			
				//#ifdef MP-WEIXIN
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: (res)=>{
						console.log(res)
						if(res.latitude){
							that.latitude = res.latitude
						}
						if(res.latitude){
							that.longitude = res.longitude
						}
						this.getjiexiadress();//经纬度解析地址
						this.getList();//拿到数据

					},fail:(e)=>{
						console.log(e)
					}
				})
				//#endif
				//#ifdef H5
				this.latitude = '34.74821'
				this.longitude = '113.61332'
				this.getjiexiadress();//经纬度解析地址
				this.getList();//拿到数据
				//#endif
				

				
			},
			async getjiexiadress(){
				let res = await this.$u.api.getAddress({
					lat:this.latitude,
					lng:this.longitude
				});
				this.formData.address = res.address
				this.formData.name = res.name
			},
			getzhuye(item){
				this.navrouter('/pages_client/twoPage/MenZhuye?id='+item.id+'&latitude='+this.latitude+'&longitude='+this.longitude)
			},
			async getList(){//列表数据
				let res = await this.$u.api.shopgetShopList({
				  limit:this.limit,
				  page:this.page,
				  lat:this.latitude,
				  lng:this.longitude,
				  keywords:this.keywords,
				  order:this.order
				});
			this.last_page = res.lastpage
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];	
			if(res.list==''||Number(list.length)<Number(this.limit)||Number(this.page)>Number(this.last_page)){
				this.status = 'nomore';
			}
				
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			gethead(e){
				this.order = e
				this.getClear()
			},
			toCommunity() {
				console.log("+++")
				const that = this
				uni.getSetting({
					success: (res) => {
						console.log(res)
						const status = res.authSetting
						// 如果当前设置是：不允许，则需要弹框提醒客户，需要前往设置页面打开授权
						if (!status['scope.userLocation']) {
							uni.showModal({
								title: "是否授权当前位置",
								content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
								success: (tip) => {
									if (tip.confirm) {
										// 如果已经拒绝过，则需要打开设置页面，授权弹框不会弹出第二次，因为已经明确拒绝/确认过了（微信的原因）
										if (that.isDeny) {
											uni.openSetting({
												success: function (res) {
													// 在设置页面授权成功后再次获取位置信息
													uni.showToast({
														title: "授权成功",
													})
													that.isDeny = false
													// 修改授权后返回页面，弹框消失，需要再点一次
												},
												fail: (data) => {
													console.log(data)
													// isDeny 是否拒绝过授权，如果拒绝过，再点击按钮的话，弹框确认后就直接打开微信小程序设置页
													that.isDeny = true
												}
											})
											return
										}
										// 如果点击了确认，并且没有拒绝过微信系统授权弹框，则会弹出授权位置信息的弹框
										uni.authorize({
											scope: "scope.userLocation",
											success: (data) => {
												// 授权弹框点击确认
												console.log(data)
												// 如果用户同意授权，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data.authSetting['scope.userLocation'] === true) {
															uni.showToast({
																title: "授权成功",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											},
											fail: (data) => {
												// 如果用户拒绝授权，则提示用户需要授权
												uni.showToast({
													title: "您已拒绝授权，请重新授权",
													icon: "none",
													duration: 1000
												})
												that.isDeny = true
											}
										})
									}
								}
							})
						} else {
							uni.chooseLocation({
								success: (res) => {
									console.log(res)
									that.formData.name = res.name
									that.formData.address = res.address
									that.longitude = res.longitude
									that.latitude = res.latitude
									that.getClear()
								},
								fail: (e) => {
									console.log(e)
								}
							})
						}
					},
					fail: () => {
						that.isDeny = true
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.content{
		background-color: #F5F5F5;
		min-height: 100vh;
		padding-bottom: 130rpx;
		.mhead{
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			background-color: #fff;
		}
		.mhone{
			display: flex;
			flex-direction: row;
			align-items: center;
			.htit{
				font-weight: 800;
				font-size: 44rpx;
				color: #111111;
				display: inline-block;
				margin-right: 20rpx;
				position: relative;
				top: -6rpx;
			}
			.tsou{
				display: flex;
				flex-direction: row;
				background: #F3F3F3;
				border-radius: 16rpx;
				padding: 6rpx 20rpx;
				align-items: center;
				margin-bottom: 14rpx;
				max-width: 55%;
				.icon_ss{
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
				.iteminput{
					margin-right: 20rpx;
					max-width: 50%;
				}
				.souname{
					margin-left: auto;
					height: 58rpx;
					background: #483C38;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #F9F9F9;
					width: 90rpx;
				}
			}
		}
		.tuanone{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-bottom: 30rpx;
			padding-top: 10rpx;
			.diqie{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.icon_dz{
				width: 28rpx;
				margin-right: 1rpx;
				height: 28rpx;
			}
			.qdi{
				max-width: 160rpx;
				display: inline-block;
				font-weight: 500;
				font-size: 28rpx;
				color: #1A1A1A;
			}
			.icon_qh{
				width: 28rpx;
				height: 28rpx;
				margin-left: 5rpx;
			}
			.qietuan{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: auto;
				.titem{
					padding: 10rpx 15rpx;
					background: #F5F5F5;
					border-radius: 12rpx;
					margin-left: 20rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					min-width: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.qctive{
					background: rgba(82,68,59,0.1);
					border-radius: 12rpx;
					border: 2px solid #52443B;
					color: #52443B;
					font-weight: 500;
				}
			}

		}
	}
	.mlist{
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		.mitem{
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			.itemtu{
				width: 172rpx;
				height: 172rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}
			.mright{
				width: 71%;
				flex-direction: column;
				.row{
					display: flex;
					flex-direction: row;
					align-items: center;

				}
				.bt{
					max-width: 80%;
					display: inline-block;
					font-weight: 800;
					font-size: 30rpx;
					color: #111111;
				}
				.icon_rz{
					width: 28rpx;
					height: 28rpx;
					margin-left: 5rpx;
				}
				.tp{
					margin-bottom: 10rpx;
				}
				.tptwo{
					margin-bottom: 5rpx;
				}
				.diname{
					font-weight: 500;
					font-size: 20rpx;
					display: inline-block;
					max-width: 73%;
					color: #999999;
				}
				.icon_dw{
					width: 20rpx;
					height: 20rpx;
					margin-right: 5rpx;
				}
				.mi{
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
				.tuanview{
					margin-top: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.tname{
						width: 34rpx;
						height: 34rpx;
						background: #FFF0ED;
						border-radius: 8rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 20rpx;
						color: #FF6100;
					}
					.qian{
						font-weight: bold;
						font-size: 28rpx;
						color: #FF6100;
						display: inline-block;
						margin: 0 6rpx;
						position: relative;
						top: -2rpx;
						.qnum{
							font-size: 36rpx;
						}
					}
					.yjia{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						text-decoration-line: line-through;
					}
					.shopname{
						max-width: 50%;
						display: inline-block;
						font-weight: 500;
						font-size: 26rpx;
						color: #1E1E1E;
						margin-left: auto;
					}
				}
			}

		}
	}

	.rexiao{
			display: flex;
			flex-direction: column;
			margin-top: 25rpx;
			.rehade{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 30rpx;
				margin: 0 30rpx 30rpx;
				.retit{
					font-weight: 800;
					font-size: 40rpx;
					color: #111111;
				}
				.geng{
					margin-left: auto;
					display: flex;
					flex-direction: row;
					align-items: center;
					.gname{
						font-weight: 500;
						font-size: 24rpx;
						color: #111111;
					}
					.icon_next{
						width: 20rpx;
						margin-left: 4rpx;
						height: 20rpx;
					}
				}
			}
			.renav{
				white-space: nowrap;
				// width: 100%;
				padding-left: 30rpx;
				// transition: transform 0.5s ease;
				animation-duration: 2s;
				margin-bottom: 40rpx;
				overflow-x: hidden;
				.rlist{
					display: inline-block;
					width: 400rpx;
					position: relative;
					margin-right: 30rpx;
					.tuimg{
						width: 400rpx;
						height: 400rpx;
						border-radius: 20rpx;
						margin-bottom: 15rpx;
					}
					.pin{
						padding: 20rpx;
						position: relative;
						.pinone{
							display: flex;
							flex-direction: row;
							.zhenxuan{
								padding: 2rpx 10rpx;
								background: #47201A;
								border-radius: 5rpx;
								margin-right: 13rpx;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								font-weight: 500;
								font-size: 20rpx;
								color: #FFFFFF;
							}
							.shopname{
								max-width: 85%;
								display: inline-block;
								font-weight: 800;
								font-size: 32rpx;
								color: #111111;
							}
						}
						.jia{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-top: 20rpx;
							.xjia{
								font-weight: bold;
								font-size: 35rpx;
								color: #FF6100;
							}
							.xiao{
								font-size: 28rpx;
							}
							.yjia{
								font-weight: 400;
								font-size: 24rpx;
								color: #111111;
								display: inline-block;
								margin-left: 14rpx;
							}
						}
					}
				}
			}
		}
		.xinlist{
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			margin: 0 30rpx 30rpx;
			.tuimg{
				width: 200rpx;
				height: 200rpx;
				margin-right: 30rpx;
				border-radius: 20rpx;
			}
			.xinright{
				width: 65%;
				display: flex;
				flex-direction: column;
				position: relative;
				.xinname{
					font-weight: 800;
					font-size: 32rpx;
					color: #111111;
					max-width: 100%;
					display: inline-block;
				}
				.xbqian{
					display: flex;
					flex-direction: row;
					margin: 20rpx 0 0;
					.bitem{
						padding: 2rpx 8rpx;
						background: #EEEEEE;
						border-radius: 5rpx;
						border: 1rpx solid #999999;
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						margin-right: 15rpx;
					}
					
				}
				.jia{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: auto;
						.xjia{
							font-weight: bold;
							font-size: 35rpx;
							color: #FF6100;
						}
						.xiao{
							font-size: 28rpx;
						}
						.yjia{
							font-weight: 400;
							font-size: 24rpx;
							color: #111111;
							display: inline-block;
							margin-left: 14rpx;
						}
					}
			}
		}
	// }
</style>
